<template>
  <div
    class="mb-3 w-full bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700"
  >
    <div class="flex flex-col items-center pb-4">
      <div class="flex flex-col items-center pb-4 pt-6 userbg">
        <div class="userinfo" @click="toabout">
          <img
            class="cursor-pointer userimg"
            :src="$store.state.setting.avatar"
            alt="Bonnie image"
          />
        </div>
        <h5
          class="text-2xl font-medium text-gray-500 dark:text-gray-200 cursor-pointer username"
          @click="toabout"
        >
          {{ $store.state.setting.author }}
        </h5>
      </div>
      <div class="heart cursor-pointer" @click="toabout">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>

      <span class="text-sm text-gray-500 dark:text-gray-300 username">
        {{ $store.state.setting.introduction }}
      </span>
      <div class="flex mt-2 space-x-3 md:mt-5">
        <span v-if="$store.state.setting.githubHome">
          <a :href="$store.state.setting.githubHome">
            <svg
              t="1697445692029"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4049"
              width="28"
              height="28"
            >
              <path
                d="M64 512c0 195.2 124.8 361.6 300.8 422.4 22.4 6.4 19.2-9.6 19.2-22.4v-76.8c-134.4 16-140.8-73.6-150.4-89.6-19.2-32-60.8-38.4-48-54.4 32-16 64 3.2 99.2 57.6 25.6 38.4 76.8 32 105.6 25.6 6.4-22.4 19.2-44.8 35.2-60.8-144-22.4-201.6-108.8-201.6-211.2 0-48 16-96 48-131.2-22.4-60.8 0-115.2 3.2-121.6 57.6-6.4 118.4 41.6 124.8 44.8 32-9.6 70.4-12.8 112-12.8 41.6 0 80 6.4 112 12.8 12.8-9.6 67.2-48 121.6-44.8 3.2 6.4 25.6 57.6 6.4 118.4 32 38.4 48 83.2 48 131.2 0 102.4-57.6 188.8-201.6 214.4 22.4 22.4 38.4 54.4 38.4 92.8v112c0 9.6 0 19.2 16 19.2C832 876.8 960 710.4 960 512c0-246.4-201.6-448-448-448S64 265.6 64 512z"
                fill="#1296db"
                p-id="4050"
              ></path>
            </svg>
          </a>
        </span>

        <span v-if="$store.state.setting.csdnHome">
          <a :href="$store.state.setting.csdnHome">
            <svg
              t="1697445780383"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5928"
              width="28"
              height="28"
            >
              <path
                d="M512 962C263.46464844 962 62 760.53535156 62 512S263.46464844 62 512 62s450 201.46464844 450 450-201.46464844 450-450 450z m15.00029297-363.44970703c30.62988281 3.825 60.44941406 4.5 90.29970703 1.84482422 20.25-1.8 39.38994141-7.35029297 56.39941406-19.26035156 33.58564453-23.54941406 43.75546875-74.88017578 21.31523438-108.14941407-12.85488281-19.08105469-32.35429687-26.67041016-53.39970703-31.20117187-30.81005859-6.62958984-61.91982422-5.05371094-93.02958985-2.99882813-4.98076172 0.31464844-5.94052734 2.7-6.36064453 7.21494141-2.7 28.72441406-5.74453125 57.40488281-8.62470703 86.09941406-2.20517578 21.81005859-4.33476563 43.62011719-6.60058594 66.45058594z m46.93447266-29.82041016c1.72529297-18.37529297 3.19482422-34.57529297 4.76982421-50.77441406 1.36582031-13.98076172 3.00058594-27.93076172 4.15546875-41.92558594 0.31464844-3.76523438 1.36494141-5.85 5.23476563-5.61005859 13.725 0.91494141 27.87011719 0.02988281 41.07041016 3.20976562 32.06953125 7.75546875 42.82470703 47.73076172 20.51982421 72.97558594-13.90429688 15.73505859-32.31035156 20.72988281-52.08046875 22.05-7.43994141 0.47988281-14.95458984 0.07470703-23.66894531 0.07470703zM512 443.70546875c-1.92041016-0.57128906-3.10517578-1.03535156-4.33476563-1.26035156-33.15058594-6.04511719-66.52441406-7.32041016-99.88505859-2.475-18.43505859 2.67011719-36.04482422 8.33994141-50.51953125 20.50488281-20.20605469 16.98046875-19.02041016 41.175 3.86894531 54.49482422 11.475 6.67529297 24.63046875 10.99511719 37.44052735 15.19541016 12.375 4.05 25.48476563 5.99941406 37.91953125 9.9 11.07070312 3.44970703 12.31523438 12.58505859 3.15 19.60488281-2.93994141 2.25-6.5390625 4.47011719-10.13994141 5.05458984-9.83935547 1.60488281-19.94941406 3.85488281-29.72988281 3.1350586-21.17988281-1.56005859-42.22441406-4.79970703-63.76464844-7.40917969-1.20058594 9.32958984-2.58046875 20.29394531-4.00517578 31.58964844 3.67470703 1.19970703 6.75 2.39941406 9.9 3.17988281 29.83535156 7.47070313 60.10488281 8.44453125 90.45 4.5 17.65458984-2.29482422 34.69482422-6.94511719 49.82958984-16.72558594 25.14023437-16.24482422 32.25058594-50.26464844-4.10976562-66.25458984-12.74941406-5.61005859-26.53417969-9.14941406-39.97441406-13.2600586-10.03535156-3.05947266-20.49082031-4.93505859-30.34511719-8.36982422-8.59570313-2.99970703-9.79541016-10.72529297-2.67011719-16.17011718 4.09482422-3.12011719 9.42011719-6.14970703 14.4-6.48017578a422.62470703 422.62470703 0 0 1 46.91953125-0.74970704c13.51494141 0.61523438 26.94023437 3.12011719 40.86035156 4.86035157L512 443.70458984z m226.00458984 1.79912109l-16.00488281 156.40576172h47.59541016c4.20029297-40.11064453 8.53417969-79.74052734 12.36005859-119.43017578 0.53964844-5.59511719 2.06982422-7.76953125 7.6350586-7.91982422 10.04941406-0.23994141 20.11464844-1.74023438 30.13505859-1.37988281 20.84941406 0.74970703 37.25947266 8.54912109 33.75 38.02412109-2.55058594 21.33105469-4.92011719 42.69023438-7.24570313 64.05029297-0.95976562 8.85058594-1.60488281 17.74511719-2.39941406 26.73017578h48.62988281c3.15-30.99023438 7.01982422-61.57529297 9.225-92.27988281 2.99970703-41.71552734-15.61464844-64.44052734-56.85029296-70.50058594-36-5.27958984-71.49023438-0.29882813-106.83017579 6.27011719zM313.05517578 563.80976563c-7.67988281 1.13994141-14.4 2.4609375-21.17988281 3.06035156-22.54570312 1.96523437-45.10546875 3.46464844-67.06494141-3.75029297-12.22558594-4.03417969-21.69052734-11.05488281-26.19052734-22.81464844-6.94511719-18.19511719 0.78046875-41.4 17.43046875-53.01035156 15.27011719-10.64970703 33.14970703-13.99482422 51.37470703-13.99482422 19.81494141-0.01494141 39.62988281 2.12958984 59.97041016 3.375l4.60458984-34.72558594c-13.24511719-1.51435547-25.91982422-3.44970703-38.67011719-4.31982422-36.04482422-2.45917969-70.875 2.29570313-103.24511719 17.9850586-26.38476563 12.79511719-45.74970703 31.65029297-51.56982421 59.87988281-6.89941406 33.52587891 10.13994141 61.08046875 45.49482421 75.45058594 16.83105469 6.82470703 34.53046875 10.99511719 52.74052735 11.06982422 21.74941406 0.08964844 43.49970703-1.37988281 65.22011719-2.59453125 2.72988281-0.15029297 7.30458984-2.55058594 7.62011718-4.42529297 1.74023438-10.15488281 2.39941406-20.4609375 3.46464844-31.17041016z"
                fill="#DD1700"
                p-id="5929"
              ></path>
            </svg>
          </a>
        </span>

        <span v-if="$store.state.setting.giteeHome">
          <a :href="$store.state.setting.giteeHome">
            <svg
              t="1697446053339"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="8035"
              width="28"
              height="28"
            >
              <path
                d="M511.573333 981.333333C252.586667 981.333333 42.666667 771.413333 42.666667 512.426667 42.666667 253.525333 252.586667 43.605333 511.573333 43.605333c258.944 0 468.864 209.92 468.864 468.906667S770.517333 981.333333 511.530667 981.333333zM748.8 460.373333h-266.24c-12.8 0-23.168 10.368-23.168 23.168v57.856c0 12.8 10.368 23.168 23.125333 23.168h162.133334c12.8 0 23.168 10.368 23.168 23.125334v11.605333c0 38.4-31.146667 69.461333-69.504 69.461333H378.368a23.168 23.168 0 0 1-23.125333-23.168V425.642667c0-38.357333 31.104-69.461333 69.461333-69.461334h324.096c12.8 0 23.168-10.368 23.168-23.168l0.042667-57.856c0-12.8-10.325333-23.168-23.125334-23.168H424.704a173.653333 173.653333 0 0 0-173.653333 173.653334v324.138666c0 12.8 10.325333 23.168 23.168 23.168h341.504a156.288 156.288 0 0 0 156.288-156.288v-133.12c0-12.8-10.368-23.168-23.168-23.168z"
                fill="#C71D23"
                p-id="8036"
              ></path>
            </svg>
          </a>
        </span>

        <span v-if="$store.state.setting.zhihuHome">
          <a :href="$store.state.setting.zhihuHome">
            <svg
              t="1697638387769"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="14400"
              width="28"
              height="28"
            >
              <path
                d="M512.42666667 36.26666667C249.49333333 36.26666667 36.16 249.6 36.16 512.53333333S249.49333333 988.8 512.42666667 988.8s476.26666667-213.22666667 476.26666666-476.26666667S775.57333333 36.26666667 512.42666667 36.26666667"
                fill="#FFFFFF"
                p-id="14401"
              ></path>
              <path
                d="M577.08088889 764.928c-24.80355555 0-46.64888889 0.68266667-64.62577778 2.27555555-17.86311111-1.70666667-39.70844445-2.27555555-64.512-2.27555555-71.33866667 0-134.82666667 26.96533333-134.82666666 46.87644445 0 19.11466667 52.67911111 16.95288889 123.904 16.15644444 28.672-0.22755555 54.95466667-3.29955555 76.34488888-7.96444444 21.16266667 4.43733333 46.76266667 7.28177778 74.52444445 7.50933333 71.11111111 0.68266667 123.904 2.84444445 123.904-16.15644445 0-19.56977778-63.60177778-46.42133333-134.71288889-46.42133333z"
                fill="#F8AD06"
                p-id="14402"
              ></path>
              <path
                d="M754.46044445 568.77511111c-13.312-35.95377778-27.87555555-71.56622222-43.69066667-106.496 0.79644445-8.64711111 1.13777778-17.29422222 1.13777777-25.82755556 0-134.03022222-68.608-242.80177778-198.99733333-242.80177777s-199.11111111 108.544-199.11111111 242.688c0 8.192 0.22755555 16.15644445 1.024 24.12088889-10.24 22.86933333-27.07911111 61.89511111-44.37333333 108.43022222-27.53422222 74.41066667-28.672 141.76711111-19.11466667 146.65955556 6.82666667 3.52711111 31.63022222-22.41422222 55.296-64.62577778 15.58755555 99.21422222 81.69244445 173.51111111 206.27911111 173.51111111 124.35911111 0 190.23644445-73.84177778 206.05155556-172.60088889 23.552 41.30133333 47.90044445 66.67377778 54.72711111 63.26044444 9.44355555-5.00622222 8.30577778-72.13511111-19.22844444-146.31822222z"
                fill=""
                p-id="14403"
              ></path>
              <path
                d="M459.43466667 273.18044445c-19.456 0.22755555-34.58844445 23.09688889-34.01955556 50.85866666 0.56888889 27.76177778 16.72533333 50.06222222 35.95377778 49.60711111 19.456-0.22755555 34.58844445-23.09688889 34.01955556-50.85866667-0.34133333-27.87555555-16.49777778-50.06222222-35.95377778-49.6071111z m107.17866666 0.4551111c-19.56977778-0.22755555-35.84 21.73155555-36.40888888 49.37955556-0.56888889 27.648 14.90488889 50.28977778 34.47466666 50.74488889 19.56977778 0.22755555 35.84-21.73155555 36.40888889-49.37955555 0.34133333-27.648-15.01866667-50.28977778-34.47466667-50.7448889z m73.38666667 222.54933334c-37.888 6.48533333-81.80622222 10.35377778-128.45511111 10.35377778-45.73866667 0-88.86044445-3.64088889-126.29333334-9.89866667-25.82755555 32.08533333-27.87555555 79.07555555-27.87555555 131.52711111 0 96.36977778 54.61333333 174.53511111 155.30666667 174.53511111 100.92088889 0 155.30666667-78.05155555 155.30666666-174.53511111 0.22755555-52.67911111-1.70666667-99.78311111-27.98933333-131.98222222z"
                fill="#FFFFFF"
                p-id="14404"
              ></path>
              <path
                d="M512.68266667 390.03022222c-67.69777778 0-122.76622222 13.65333333-122.76622222 24.576s71.68 40.96 122.76622222 40.96 122.76622222-30.72 122.76622222-40.96c0-10.35377778-54.84088889-24.576-122.76622222-24.576z"
                fill="#F8AD06"
                p-id="14405"
              ></path>
              <path
                d="M710.76977778 462.16533333v-0.79644444C661.04888889 477.75288889 590.73422222 488.10666667 512.68266667 488.10666667s-148.59377778-10.35377778-198.31466667-26.96533334c-10.46755555 23.552-20.70755555 47.44533333-30.15111111 71.68 30.72 10.24 65.08088889 18.31822222 102.17244444 24.12088889v91.136s26.39644445 4.77866667 50.97244445 5.91644445c17.52177778 0.68266667 36.18133333-2.27555555 36.18133333-2.27555556v-86.47111111c12.74311111 0.56888889 25.82755555 0.79644445 39.13955556 0.79644445 85.56088889 0 164.75022222-12.288 227.89688888-33.22311112-9.32977778-23.66577778-19.34222222-47.33155555-29.80977777-70.656z"
                fill="#E91F1F"
                p-id="14406"
              ></path>
              <path
                d="M470.92622222 308.224c-8.53333333 0-15.47377778 8.87466667-15.47377777 20.02488889 0 11.03644445 6.94044445 20.02488889 15.47377777 20.02488889s15.47377778-9.10222222 15.47377778-20.02488889c0.11377778-11.15022222-6.82666667-20.02488889-15.47377778-20.02488889z m113.664 12.74311111s-6.25777778-7.39555555-21.84533333-5.34755556c-15.47377778 1.93422222-21.39022222 10.92266667-22.528 11.71911112 0 0-3.64088889 5.12-1.13777778 8.192s7.28177778-1.82044445 7.28177778-1.82044445 7.05422222-8.76088889 16.27022222-9.10222222c9.216-0.22755555 14.44977778 3.64088889 14.44977778 3.64088889s4.55111111 3.29955555 7.28177778 0c2.95822222-3.29955555 0.22755555-7.28177778 0.22755555-7.28177778z"
                fill=""
                p-id="14407"
              ></path>
              <path
                d="M512.42666667 58.77333333c249.6 0 452.48 202.88 452.48 452.48S762.02666667 963.73333333 512.42666667 963.73333333 59.94666667 760.74666667 59.94666667 511.25333333 263.04 58.77333333 512.42666667 58.77333333z m0-23.78666666c-262.93333333 0-476.26666667 213.22666667-476.26666667 476.26666666s213.22666667 476.26666667 476.26666667 476.26666667 476.26666667-213.22666667 476.26666666-476.26666667S775.57333333 34.98666667 512.42666667 34.98666667"
                fill=""
                p-id="14408"
              ></path>
            </svg>
          </a>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useStore } from "vuex";
import { initTooltips } from "flowbite";
import { onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

function toabout() {
  router.push("/about");
}

// initialize components based on data attribute selectors
onMounted(() => {
  initTooltips();
});

const store = useStore();
</script>
<style scoped>
.userbg {
  background-image: var(--el-bg-usercard);
  width: 100%;
  border-radius: 10px 10px 0px 0px;
}
.username {
  background: linear-gradient(
    to right,
    #38e5ee,
    #e2703b,
    #ed4f4f,
    #997dee,
    #9abdee
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.head-portrait :hover {
  content: "";
  background: linear-gradient(to bottom, transparent 50%, #222);
}
.heart {
  width: 160px;
  height: 120px;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
.heart span {
  /* 自定义属性值【划重点】 */
  --c: plum;
  --h: 50%;
  --t: 25%;
  /* var()函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用 */
  background-color: var(--c);
  width: 13px;
  border-radius: 10px;
  position: relative;
  height: var(--h);
  top: var(--t);
  /* 执行动画 infinite是无限次播放 */
  animation: beating 1s infinite;
}
.heart span:nth-child(1),
.heart span:nth-child(9) {
  --c: lightcoral;
  --h: 35px;
  --t: 22px;
}
.heart span:nth-child(2),
.heart span:nth-child(8) {
  --c: lightskyblue;
  --h: 70px;
  --t: 6px;
}
.heart span:nth-child(3),
.heart span:nth-child(7) {
  --c: lightgreen;
  --h: 90px;
  --t: 0;
}
.heart span:nth-child(4),
.heart span:nth-child(6) {
  --c: gold;
  --h: 100px;
  --t: 10px;
}
.heart span:nth-child(5) {
  --c: plum;
  --h: 104px;
  --t: 18px;
}

/* 接下来我们定义动画 */
@keyframes beating {
  0%,
  30% {
    height: var(--h);
    top: var(--t);
    background-color: var(--c);
    filter: blur(0);
  }
  60%,
  70% {
    height: 50%;
    top: 25%;
    background-color: plum;
    /* 模糊度 */
    filter: blur(5px);
  }
}

/* 外圈 */
.userinfo {
  width: 100px;
  height: 100px;
  /* 相对定位 */
  position: relative;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #4bc0c8;
  /* 执行动画：动画名 时长 线性的 无限次播放 */
  animation: spin 2s linear infinite;
}
/* 中圈 */
.userinfo::before {
  content: "";
  /* 绝对定位 */
  position: absolute;
  left: 3px;
  top: 3px;
  right: 3px;
  bottom: 3px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #c779d0;
  /* 执行动画：动画名 时长 线性的 无限次播放 */
  animation: spin 3s linear infinite;
}
/* 内圈 */
.userinfo::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #feac5e;
  /* 执行动画：动画名 时长 线性的 无限次播放 */
  animation: spin 1.5s linear infinite;
}
.userimg {
  animation: spin 2s linear infinite;
  animation-direction: reverse;
  border-radius: 50%;
  position: absolute;
  padding: 15px;
}
/* 定义动画 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
